<template>
  <div>
    <div class="main">
      <div class="group nocv-group">
        <van-cell value="人数统计" />
        <van-row class="group-inner">
          <van-col span="6">
            <div class="nocv-group-title">{{ collegeNumber }}</div>
            <div class="nocv-group-txt">上报人数</div>
          </van-col>
          <van-col span="6">
            <div class="nocv-group-title">0</div>
            <div class="nocv-group-txt">未报人数</div>
          </van-col>
          <van-col span="6">
            <div class="nocv-group-title">{{ classNumber }}</div>
            <div class="nocv-group-txt">班级人数</div>
          </van-col>
          <van-col span="6">
            <div class="nocv-group-title">{{ collegeNumber }}</div>
            <div class="nocv-group-txt">学院人数</div>
          </van-col>
        </van-row>
      </div>
      <div class="group changy-group">
        <van-cell value="疫情管理" />
        <van-grid :border="false" :column-num="4">
          <van-grid-item
            v-for="(item, index) in tools"
            :key="index"
            :icon="item.icon"
            :text="item.title"
            :to="item.path"
          />
        </van-grid>
      </div>
      <div class="group about-group">
        <van-cell title="关于" is-link to="about" />
        <van-cell title="日志" is-link to="log" />
        <van-cell title="联系我们" is-link to="callMe" />
      </div>
    </div>
    <div class="copyright">
      copyright@<a href="https://gitee.com/yinlululu/ncov-monitor"
        >ncov-monitor</a
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tools: [
        { icon: 'upgrade', title: '疫情上报', path: '/report' },
        { icon: 'location-o', title: '定位签到', path: '/sign' },
        { icon: 'comment-o', title: '个人信息', path: '/information' },
        { icon: 'setting-o', title: '设置', path: '/setting' },
        { icon: 'more-o', title: '更多', path: '/more' }
      ],
      userReportInfo: [],
      collegeNumber: 0,
      classNumber: 0
    }
  },
  created() {
    this.getAllCollege()
    this.getAllClass()
  },
  methods: {
    getAllCollege() {
      this.$api.serveapi
        .getAllCollege()
        .then(res => {
          this.userReportInfo = res.data.result
          this.collegeNumber = res.data.result.length
        })
        .catch(err => {})
    },
    getAllClass() {
      this.$api.serveapi
        .getAllClass()
        .then(res => {
          this.classNumber = res.data.result.length
        })
        .catch(err => {})
    },
  }
}
</script>

<style lang="scss" scoped>
@mixin box-stayle {
  box-sizing: border-box;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.main {
  margin-top: -50px;
}
.group {
  @include box-stayle();
  margin: 0 15px 15px 15px;
  .group-inner {
    padding: 10px 0;
  }
}
.nocv-group {
  @include box-stayle();
  margin-top: 10px;
  .van-row {
    text-align: center;
  }
  .van-col {
    text-align: center;
  }
  .nocv-group-title {
    font-size: 14px;
    font-weight: bold;
    color: #000;
    margin-bottom: 5px;
  }
  .nocv-group-txt {
    font-size: 12px;
    color: #999;
  }
}
.changy-group {
  .van-icon {
    font-size: 24px;
  }
  .van-col {
    margin-bottom: 10px;
  }
}
</style>
